<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8"/>
   <title>选项卡</title>
<style>
    #div1 .active{
        background:yellow; 
    }
    #div1 div{
   	   width:200px;height:200px;background:#ccc;border:1px solid black;display:none;
    }
</style>
<script>
    window.onload = function(){
        var oDiv = document.getElementById('div1');//获取div1
        var aBtn = oDiv.getElementsByTagName('input');//获取input
        var aDiv = oDiv.getElementsByTagName('div');//获取div1下的div
        //循环input，每次点击按钮，按钮变亮，其他的变暗，并且指向对应的div文本框
        for(var i=0;i<aBtn.length;i++){
        	aBtn[i].index = i;   //给每个div加个index,默认index=0,1,2,3  每次点击button按钮他就会指向相应的内容
            aBtn[i].onclick = function(){
            	for(var i=0;i<aBtn.length;i++){
            		aBtn[i].className = ''; //先把它清空，没有颜色，点击之后再显示颜色
            		aDiv[i].style.display = 'none';  //隐藏掉所有DIV
            	}
            	this.className = 'active';//点击哪个，哪个变亮

            	aDiv[this.index].style.display = 'block';  //点击按钮弹出指定的文本框
            	
            }
        }
    }
</script>
</head>
<body>

    <div id="div1">
        <input class="active" type="button" value="教育"/>
        <input type="button" value="培训"/>
        <input type="button" value="招生"/>
        <input type="button" value="出国"/>
        <div style="display:block;">教育机构。。。。</div>
        <div>培训内容。。。。</div>
        <div>招生指南。。。。</div>
        <div>出国就业。。。。</div>
    </div>

</body>
</html>






































































